@import './reset';
body{
	background: #F5F8FA;
}
.container{
	width: 100%;
	overflow: hidden;
	/*padding-bottom: calculateRem(60px);*/
	.play-box{
		width: 100%;
		height: auto;
		background: white;
		box-sizing: border-box;
		padding: calculateRem(14px) calculateRem(16px) calculateRem(6px);
		margin-bottom: calculateRem(10px);
		.play-top{
			width: 100%;
			height: auto;
			overflow: hidden;
			.title{
				width: 100%;
				height: calculateRem(24px);
				line-height: calculateRem(24px);
				@include ell;
				font-size: calculateRem(17px);
				color: #333;
				margin-bottom: calculateRem(5px);
			}
			.time{
				width: 100%;
				height: calculateRem(19px);
				line-height: calculateRem(19px);
				@include ell;
				font-size: calculateRem(12px);
				color: #3D464C;
				.status-btn{
					display: inline-block;
					height: calculateRem(19px);
					line-height: calculateRem(19px);
					box-sizing: border-box;
					border: 1px transparent solid;
					border-radius: 2px;
					margin-left: 3px;
					padding: 0 4px;
				}
				.playing{
					color: #d94446;
					border: 1px solid #d94446;
				}
				.preview{
					color: #3498dc;
					border: 1px solid #3498dc;
				}
				.backview{
					color: #f5ab30;
					border: 1px solid #f5ab30;
				}
				.endview{
					color: #9fa3a6;
					border: 1px solid #9fa3a6;
				}

			}
		}
		.video-box{
			display: block;
			width: 100%;
			height: calculateRem(193px);
			box-sizing: border-box;
			margin-top: calculateRem(10px);
			position: relative;
			.video-bg{
				width: 100%;
				height: 100%;
				>img{
					width: 100%;
					height: 100%;
				}
			}
			.play-icon{
				position: absolute;
				width: calculateRem(42px);
				height: calculateRem(42px);
				left: 50%;
				top: 50%;
				margin-left: calculateRem(-21px);
				margin-top: calculateRem(-21px);
				>img{
					width: 100%;
					height: 100%;
				}
			}

		}
		.contributing{
			position: relative;
			&:after{
				content: '';
				display: block;
				position: absolute;
				width: calculateRem(46px);
				height: calculateRem(45px);
				background: url('../images/Group5@2x.png') no-repeat;
				background-size: 100%;
				top: -2px;
				right: -2px;
				z-index: 1000;
			}

		}

		.play-bottom{
			width: 100%;
			height: auto;
			margin-top: calculateRem(10px);
			.p-man{
				display: inline-block;
				vertical-align: top;
				height: calculateRem(24px);
				line-height: calculateRem(24px);
				max-width: calculateRem(80px);
				width: auto;
				margin-right: calculateRem(13px);
				margin-bottom: calculateRem(10px);
				.pic{
					height: calculateRem(24px);
					width: calculateRem(24px);
					border-radius: 50%;
					overflow: hidden;
					float: left;
					>img{
						width: 100%;
						height: 100%;
					}
				}
				.name{
					float: left;
					height: calculateRem(24px);
					width: calculateRem(50px);
					margin-left: calculateRem(6px);
					@include ell;
					
				}
			}
		}




	}

}

.dropload-up,.dropload-down{
    position: relative;
    height: 0;
    overflow: hidden;
    font-size: 12px;
    /* 开启硬件加速 */
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
}
.dropload-down{
    height: 50px;
}
.dropload-refresh,.dropload-update,.dropload-load,.dropload-noData{
    height: 50px;
    line-height: 50px;
    text-align: center;
}
.dropload-load .loading{
    display: inline-block;
    height: 15px;
    width: 15px;
    border-radius: 100%;
    margin: 6px;
    border: 2px solid #666;
    border-bottom-color: transparent;
    vertical-align: middle;
    -webkit-animation: rotate 0.75s linear infinite;
    animation: rotate 0.75s linear infinite;
}
@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


.opacity{
    -webkit-animation: opacity 0.3s linear;
    animation: opacity 0.3s linear;
}
@-webkit-keyframes opacity {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
@keyframes opacity {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}